<script setup>
import Collection from './components/collection.vue';
import linkCode from './components/linkCode.vue'
import { useStore } from '@/store'
import Menu from '@/components/menu.vue'
import { ref } from 'vue'
const store = useStore()
const delmeua = ref()
const delActive = ref(false)
function del(item) {
    store.removeToken(item.token)
}
function delClose() {
    delActive.value = false
}

</script>

<template>
    <div class="contain back" @click="delClose">
        <div class="link all">
            <linkCode />
        </div>
        <div class="recently-link all flex" v-if="store.tokenlist.length>0">
            <div class="tip">最近链接</div>
            <div class="collections wrap">
                <Collection v-for="(u, i) in store.tokenlist" :data="u" :key="i" @del="del"></Collection>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.meua {
    position: absolute;

    a {
        text-decoration: none;
    }
}

.contain {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-flow: row wrap;
    align-content: space-between;
}

.tip {
    width: 100px;
    text-align: center;
    font-size: 14px;
}

.collections {
    width: calc(100% - 100px);
}

.collection {
    display: flex;
    // background-color: rgb(242, 242, 242);
}

.all {
    width: 100%;
    min-height: 10px;
    align-items: center;
}
</style>